import React from 'react';
import RuleEnginePanel from '../components/RuleEnginePanel';

function RuleEnginePage() {
  return (
    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
      {/* 页面标题和返回按钮 */}
      <div style={{
        position: 'fixed',
        top: '20px',
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 1000,
        background: 'rgba(30, 30, 30, 0.9)',
        padding: '15px 30px',
        borderRadius: '10px',
        border: '2px solid #2196F3',
        backdropFilter: 'blur(10px)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '10px'
      }}>
        <h1 style={{
          margin: 0,
          color: '#2196F3',
          fontSize: '24px',
          textAlign: 'center'
        }}>
          🤖 规则引擎控制面板
        </h1>
        <div style={{ display: 'flex', gap: '10px' }}>
          <a href="/" style={{
            padding: '8px 16px',
            background: '#4CAF50',
            color: 'white',
            textDecoration: 'none',
            borderRadius: '4px',
            fontWeight: 'bold'
          }}>
            🏠 返回主页
          </a>
        </div>
      </div>

      {/* 规则引擎面板 */}
      <div style={{
        position: 'fixed',
        top: '120px',
        left: '50%',
        transform: 'translateX(-50%)',
        width: '90%',
        maxWidth: '1200px',
        zIndex: 900
      }}>
        <RuleEnginePanel />
      </div>
    </div>
  );
}

export default RuleEnginePage;